<template>
    <div class="node-sync">
        <div>{{$t('nodeSync.syncStatus')}}</div>
        <p>
            <span v-show="syncing"><i class="el-icon-loading"></i>{{$t('nodeSync.syncing')}}</span>
            <span v-show="!syncing" class="bold">{{$t('nodeSync.compolete')}}</span>
        </p>
        <div>{{$t('nodeSync.Blocks')}}</div>
        <p><span>{{blockNumber}}</span></p>
        <div class="net-name">DLB-TEST</div>
    </div>
</template>

<script>
import { getInitdata } from '../../createAccount'
import { setTimeout } from 'timers';
export default {
    name: 'nodeSync',
    data () {
        return {
            syncing:false,
            currentBlock:0,
            highestBlock:0,
            blockNumber:0
        }  
    },
    mounted(){
        this.fetchData()
        setInterval(()=>{
            this.fetchData()
        },30000)
    },
    methods:{
        fetchData(){
            this.syncing = true
            getInitdata((resp)=>{
                console.log(resp)
                this.syncing = false
                if(resp.code == 200){
                    // 网络连接成功
                    this.blockNumber = resp.data.totalBlocks
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.node-sync{
    margin-top:5px;
    padding:12px 20px;
    font-size: 12px;
    color: #fff;
    border-top:solid 1px #16255D;
    p{
        margin-bottom:10px;
        span{
            margin-top: 5px;
            padding-left: 30px;
            display: inline-block;
            &.bold{
                color:#32C5DD;
            }
        }
    }
    div{
        margin-top:10px;
        i{
            font-size:14px;
            margin-left: 2px;
            vertical-align: bottom;
        }
    }
    .net-name{
        width:120px;
        height:28px;
        background:rgba(50,197,221,1);
        border-radius:2px;
        color:#fff;
        font-size:12px;
        text-align:center;
        line-height:28px;
        margin-top:80px;
    }
}
</style>
